<template>
  <el-form label-width="90px" size="mini">
    <el-collapse value="1" class="customer-collapse">
      <chart-base-option :attribute="attribute"></chart-base-option>
      <el-collapse-item title="图形">
        <el-form-item label="玫瑰图">
          <tm-select v-model="attribute.series.roseType" :data="roseTypeList"></tm-select>
        </el-form-item>

        <tm-group label="间隙">
          <el-form-item label="显示">
            <el-switch v-model="attribute.gap.show"/>
          </el-form-item>
          <el-form-item label="间隙值">
            <el-input-number v-model="attribute.gap.value"/>
          </el-form-item>
        </tm-group>

        <tm-group label="半径">
          <el-form-item label="内圈">
            <el-input v-model="attribute.series.radius[0]" />
          </el-form-item>
          <el-form-item label="外圈">
            <el-input v-model="attribute.series.radius[1]" />
          </el-form-item>
        </tm-group>

        <tm-group label="文字">
          <el-form-item label="是否显示">
            <el-switch v-model="attribute.series.label.show" />
          </el-form-item>
          <el-form-item label="文字颜色">
            <el-color-picker v-model="attribute.series.label.color" show-alpha/>
          </el-form-item>
          <el-form-item label="文字大小">
            <el-input-number v-model="attribute.series.label.fontSize" />
          </el-form-item>
          <el-form-item label="格式">
            <el-input v-model="attribute.series.label.formatter" />
          </el-form-item>
          <el-form-item label="位置">
            <tm-select v-model="attribute.series.label.position" :data="positionList"></tm-select>
          </el-form-item>
          <el-form-item label="对齐方式">
            <tm-select v-model="attribute.series.label.alignTo" :data="alignList"></tm-select>
          </el-form-item>
        </tm-group>

        <tm-group label="引导线">
          <el-form-item label="显示">
            <el-switch v-model="attribute.series.labelLine.show"></el-switch>
          </el-form-item>
          <el-form-item label="平滑">
            <el-switch v-model="attribute.series.labelLine.smooth"></el-switch>
          </el-form-item>
          <el-form-item label="线宽">
            <el-input-number v-model="attribute.series.labelLine.lineStyle.width" />
          </el-form-item>
          <el-form-item label="类型">
            <tm-select v-model="attribute.series.labelLine.lineStyle.type" :data="lineList"></tm-select>
          </el-form-item>
        </tm-group>

        <tm-group label="边框">
          <el-form-item label="线宽">
            <el-input-number v-model="attribute.series.itemStyle.borderWidth" />
          </el-form-item>
          <el-form-item label="类型">
            <tm-select v-model="attribute.series.itemStyle.borderType" :data="lineList"></tm-select>
          </el-form-item>
          <el-form-item label="圆角">
            <el-input-number v-model="attribute.series.itemStyle.borderRadius " />
          </el-form-item>
          <el-form-item label="颜色">
            <el-color-picker v-model="attribute.series.itemStyle.borderColor" show-alpha/>
          </el-form-item>
        </tm-group>

        <tm-group label="阴影">
          <el-form-item label="模糊">
            <el-input-number v-model="attribute.series.itemStyle.shadowBlur" />
          </el-form-item>
          <el-form-item label="阴影颜色">
            <el-color-picker v-model="attribute.series.itemStyle.shadowColor" show-alpha/>
          </el-form-item>
          <el-form-item label="偏移X">
            <el-input-number v-model="attribute.series.itemStyle.shadowOffsetX "/>
          </el-form-item>
          <el-form-item label="偏移Y">
            <el-input-number v-model="attribute.series.itemStyle.shadowOffsetY "/>
          </el-form-item>
        </tm-group>


      </el-collapse-item>
    </el-collapse>
  </el-form>
</template>

<script>
import chartBaseOption from '../chart-base-option'
import tmSelect from '@/package/components/tm-select'

export default {
  name: 'pie01-option',
  cnName: 'pie01-option',
  components: {
    chartBaseOption,
    tmSelect
  },
  props: {
    attribute: Object
  },
  data() {
    return {
      roseTypeList: [
        {label: 'false', value: ''},
        {label: 'radius', value: 'radius'},
        {label: 'area', value: 'area'}
      ],
      positionList: [
        {label: 'outer', value: 'outer'},
        {label: 'outside', value: 'outside'},
        {label: 'inside', value: 'inside'},
        {label: 'center', value: 'center'}
      ],
      lineList: [
        {label: 'solid', value: 'solid'},
        {label: 'dotted', value: 'dotted'},
        {label: 'dashed', value: 'dashed'}
      ],
      alignList: [
        {label: '无', value: 'none'},
        {label: '末端对齐', value: 'labelLine'},
        {label: '文字对齐', value: 'edge'}
      ]
    }
  },
  methods: {}
}
</script>

<style lang="less" scoped>
</style>
